<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>02-媒体特性</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			h1 {
				height: 200px;
				line-height: 200px;
				text-align: center;
				background-color: gray;
				font-size: 100px;
			}

			/* 检测到视口宽度为800px时，应用以下样式 */
			@media (width: 800px) {
				h1 {
					background-color: greenyellow;
				}
			}

			/* 上限为700px，表示小于等于700px时，应用以下样式 */
			@media (max-width: 700px) {
				h1 {
					background-color: orange;
				}
			}

			/* 下限为900px，表示大于等于900px时，应用以下样式 */
			@media (min-width: 900px) {
				h1 {
					background-color: skyblue;
				}
			}

			/* 如果设备屏幕宽度为1920px，应用以下样式 */
			@media (device-width: 1920px) {
				h1 {
					color: white;
					/* background-image: linear-gradient(to right, #ff0000, #00ff00, #0000ff); */
				}
			}

			/* max-device-width: 1920px; 设备屏幕宽度小于等于1920px时，应用以下样式 */
			/* min-device-width: 1024px; 设备屏幕宽度大于等于1024px时，应用以下样式 */

			/* orientation: portrait; 视口处于纵向，即高度大于宽度 */
			/* orientation: landscape; 视口处于横向，即宽度大于高度 */

			/* aspect-ratio: 16/9; 屏幕比例为16:9 */
		</style>
	</head>
	<body>
		<h1>你好啊</h1>
	</body>
</html>
